<template>
    <div class="orderrow">
        <div class="scrollbarItem">
            <div style="height:90vh;width:33%">
                <el-card 
                    class='cardinfo'
                    style="height:64%;width:96%"
                    @click="print()"
                >
                    <template #header>
                        <span>订单</span>
                    </template>
                    <el-row>
                        <el-col :span="12">
                            <el-table
                                :data="orderData1"
                                :stripe = true
                                :border = true
                            >
                                <el-table-column prop="type" :formatter="headerTrans" label="关键值" />
                                <el-table-column prop="data" :formatter="TimeTrans" label="数据" />
                            </el-table>
                        </el-col>
                        <el-col :span="12">
                            <el-table
                                :data="orderData2"
                                :stripe = true
                                :border = true
                            >
                                <el-table-column prop="type" :formatter="headerTrans" label="关键值" />
                                <el-table-column prop="data" :formatter="TimeTrans" label="数据" />
                            </el-table>
                        </el-col>
                    </el-row>
                </el-card>
                <el-card :class="BZstyle" style="height:31%;width:96%">
                    <template #header>
                        <span>包装</span>
                    </template>
                    <el-table 
                        :data="tableData"
                        :stripe = true
                    >
                        <el-table-column prop="BZTime" :formatter='datatrans' label="更新日期" width="180" />
                        <el-table-column prop="BZNum" label="数量" width="100" />
                        <el-table-column prop="BZBz" label="备注" />
                    </el-table>
                    <div style="text-align:right;margin-right:30px;margin-top:6px">
                        <el-button plain type="info">
                            增加
                        </el-button>
                    </div>
                </el-card>
            </div>
            <div style="height:90vh;width:33%">
                <el-card :class="CXstyle" style="height:31%;width:96%">
                    <template #header>
                        <div>
                            <span>成型车间</span>
                        </div>
                    </template>
                    <el-table
                        :data="tableData"
                        :stripe = true
                    >
                        <el-table-column prop="CXTime" :formatter='datatrans' label="更新日期" width="180" />
                        <el-table-column prop="CXNum" label="数量" width="100" />
                        <el-table-column prop="CXBz" label="备注" />
                    </el-table>
                    <div style="text-align:right;margin-right:30px;margin-top:6px">
                        <el-button plain type="info">
                            增加
                        </el-button>
                    </div>
                </el-card>
                <el-card :class="SJstyle" style="height:31%;width:96%">
                    <template #header>
                        <span>烧结</span>
                    </template>
                    <el-table 
                        :data="tableData"
                        :stripe = true
                    >
                        <el-table-column prop="SJTime" :formatter='datatrans' label="更新日期" width="180" />
                        <el-table-column prop="SJNum" label="数量" width="100" />
                        <el-table-column prop="SJBz" label="备注" />
                    </el-table>
                    <div style="text-align:right;margin-right:30px;margin-top:6px">
                        <el-button plain type="info">
                            增加
                        </el-button>
                    </div>
                </el-card>
                <el-card :class="ZXstyle" style="height:31%;width:96%">
                    <template #header>
                        <span>整形车间</span>
                    </template>
                    <el-table 
                        :data="tableData"
                        :stripe = true
                    >
                        <el-table-column prop="ZXTime" :formatter='datatrans' label="更新日期" width="180" />
                        <el-table-column prop="ZXNum" label="数量" width="100" />
                        <el-table-column prop="ZXBz" label="备注" />
                    </el-table>
                    <div style="text-align:right;margin-right:30px;margin-top:6px">
                        <el-button plain type="info">
                            增加
                        </el-button>
                    </div>
                </el-card>
            </div>
            <div style="height:90vh;width:33%">
                <el-card :class="JJGstyle" style="height:31%;width:96%">
                    <template #header>
                        <span>机加工</span>
                    </template>
                    <el-table 
                        :data="tableData"
                        :stripe = true
                    >
                        <el-table-column prop="JJGTime" :formatter='datatrans' label="更新日期" width="180" />
                        <el-table-column prop="JJGNum" label="数量" width="100" />
                        <el-table-column prop="JJGBz" label="备注" />
                    </el-table>
                    <div style="text-align:right;margin-right:30px;margin-top:6px">
                        <el-button plain type="info">
                            增加
                        </el-button>
                    </div>
                </el-card>
                <el-card :class="RCLstyle" style="height:31%;width:96%">
                    <template #header>
                        <span>热处理</span>
                    </template>
                    <el-table 
                        :data="tableData"
                        :stripe = true
                    >
                        <el-table-column prop="RCLTime" :formatter='datatrans' label="更新日期" width="180" />
                        <el-table-column prop="RCLNum" label="数量" width="100" />
                        <el-table-column prop="RCLBz" label="备注" />
                    </el-table>
                    <div style="text-align:right;margin-right:30px;margin-top:6px">
                        <el-button plain type="info">
                            增加
                        </el-button>
                    </div>
                </el-card>
                <el-card :class="WXstyle" style="height:31%;width:96%">
                    <template #header>
                        <span>外协</span>
                    </template>
                    <el-table 
                        :data="tableData"
                        :stripe = true
                    >
                        <el-table-column prop="WXTime" :formatter='datatrans' label="更新日期" width="180" />
                        <el-table-column prop="WXNum" label="数量" width="100" />
                        <el-table-column prop="WXBz" label="备注" />
                    </el-table>
                    <div style="text-align:right;margin-right:30px;margin-top:6px">
                        <el-button plain type="info">
                            增加
                        </el-button>
                    </div>
                </el-card>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import { onMounted, reactive, toRefs } from "vue";
import {
    ElTable,
    ElTag,
    ElTableColumn,
    ElRow,
    ElScrollbar,
    ElCard,
    ElCol,
    ElButton,
} from "element-plus";
import axios from 'axios'
import bus from '../../utils'
import UserStore from '../../store/userstore'

export default {
    name: "订单区",
    components: {
        ElTable,
        ElTag,
        ElTableColumn,
        ElRow,
        ElScrollbar,
        ElCard,
        ElCol,
        ElButton,
    },
    setup(props: any) {
        const store = UserStore()
        const data = reactive({
            tableData: [] as any,
            orderData1: [] as any,
            orderData2: [] as any,
            ordertarget:0,
            CXstyle:'cardtodo' as any,
            SJstyle:'cardtodo' as any,
            ZXstyle:'cardtodo' as any,
            JJGstyle:'cardtodo' as any,
            RCLstyle:'cardtodo' as any,
            WXstyle:'cardtodo' as any,
            BZstyle:'cardtodo' as any,
        });
        const methods = reactive({
            datatrans: (msg : any,col : any,cell : any) => {
                let date = new Date(parseInt(cell)).toLocaleString()
                return date
            },
            TimeTrans: (msg :any) => {
                if(msg.type !== 'XdTime' && msg.type !== 'JqTime') return msg.data
                let date = new Date(parseInt(msg.data)).toLocaleString()
                return date
            },
            headerTrans: (msg : any) => {
                let result = '' as any
                switch(msg.type){
                    case 'ddID':
                        result = '订单编号'
                        break;
                    case 'cliID':
                        result = '客户编号'
                        break;
                    case 'BPID':
                        result = '图号'
                        break;
                    case 'cliBPID':
                        result = '客户图号'
                        break;
                    case 'ProSize':
                        result = '产品规格'
                        break;
                    case 'ProNum':
                        result = '订单数量'
                        break;
                    case 'CZ':
                        result = '材质'
                        break;
                    case 'XdTime':
                        result = '下单时间'
                        break;
                    case 'JqTime':
                        result = '交期'
                        break;
                    case 'ProW':
                        result = '产品单重'
                        break;
                    case 'ddFL':
                        result = '订单粉量'
                        break;
                    case 'DJ':
                        result = '等级'
                        break;
                }
                return result?result : msg.type
            },
        })
        onMounted(() => {
            axios.get('http://localhost:9000/ddinfo',{params:store.orderid}).then((res) => {
                data.tableData = res.data.data
                Object.keys(res.data.data[0]).forEach((item) => {
                    data.orderData1.push({type : item , data : res.data.data[0][item]})
                })
                data.orderData2 = data.orderData1.slice(6, 12)
                data.orderData1 = data.orderData1.slice(0, 6)
                data.ordertarget = data.tableData[0].ProNum
                data.CXstyle = data.tableData[0].CXNum >= data.ordertarget?'carddone':'cardtodo'
                data.SJstyle = data.tableData[0].SJNum >= data.ordertarget?'carddone':'cardtodo'
                data.ZXstyle = data.tableData[0].ZXNum >= data.ordertarget?'carddone':'cardtodo'
                data.JJGstyle = data.tableData[0].JJGNum >= data.ordertarget?'carddone':'cardtodo'
                data.RCLstyle = data.tableData[0].RCLNum >= data.ordertarget?'carddone':'cardtodo'
                data.WXstyle = data.tableData[0].WXNum >= data.ordertarget?'carddone':'cardtodo'
                data.BZstyle = data.tableData[0].BZNum >= data.ordertarget?'carddone':'cardtodo'
            })
        })
        return {
            ...toRefs(data),
            ...toRefs(methods),
        };
    },
};
</script>

<style>
    @import url(../../assets/css/orderinfo.css);
</style>
